revision:
<style>
/* examples styling*/
* {box-sizing: border-box;}
img {max-width: 100%;}
.container {font-size: 2.5vw;}
.container > * {--base-hue: 80; --hue: var(--base-hue); background-color: hsl(var(--hue), 95%, 80%); border: 0.2vw solid hsl(var(--hue),
95%, 35%); color: hsl(var(--hue), 95%, 20%); text-align: center; border-radius: var(--border-radius, 1vw);}
.container > *:not(img) {padding: var(--padding, 2vw);}
.container > *:nth-child(5n+2) {--hue: 20;}
.container > *:nth-child(5n+3) {--hue: 40;}
.container > *:nth-child(5n+4) {--hue: 120;}
.container > *:nth-child(5n+5) {--hue: 180;}
/* demo styles */
h2{isolation:isolate;text-decoration-line: overline underline; color:darkgreen;}
.container{outline: 0.2vw dashed;}
.writing-mode {writing-mode: vertical-lr;}
/*different modules */
.inline{margin: 3vw 0vw;}
.inline > * {display: inline;}
.inline-block > * {display: inline-block;}
.inline-table > * {display: inline-table;}
.absolute, .fixed { position: relative; height: 5ch;}
.absolute > *, .fixed > * {position: absolute;top: 0;width: 4ch;}
.absolute:nth-child(2), .fixed:nth-child(2) {left: 4ch;}
.absolute:nth-child(3), .fixed:nth-child(3) {left: 8ch;}
.float {display: flow-root;}
.float > * {float: left;}
.columns {columns: 3;}
.flex {display: flex;}
.inline-flex {display: inline-flex;}
.inline-grid > * {display: inline-grid;}
.grid {display: grid;}
.grid-auto-flow {grid-auto-flow: column;}
.grid-template-columns {grid-template-columns: repeat(3, 1fr);}
.grid-template-areas {grid-template-areas: "a b c";}
.block > *{display: block;}
</style>
code:
<div class="container inline">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.inline{margin: 3vw 0vw;}
.inline > * {display: inline;}
</style>
:
<div class="container inline-block">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.inline-block > * {display: inline-block;}
</style>
<div class="container inline-table">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.inline-table > * {display: inline-table;}
</style>
<div class="container absolute">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.absolute { position: relative; height: 5ch;}
.absolute > *, {position: absolute;top: 0;width: 4ch;}
.absolute:nth-child(2) {left: 4ch;}
.absolute:nth-child(3) {left: 8ch;}
</style>
<div class="container fixed">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.fixed { position: relative; height: 5ch;}
.fixed > * {position: absolute;top: 0;width: 4ch;}
.fixed:nth-child(2) {left: 4ch;}
.fixed:nth-child(3) {left: 8ch;}
</style>
<div class="container float">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.float {display: flow-root;}
.float > * {float: left;}
</style>
<div class="container columns">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.columns {columns: 3;}
</style>
<div class="container flex">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.flex {display: flex;}
</style>
<div class="container inline-flex">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.inline-flex {display: inline-flex;}
</style>
<div class="container inline-grid">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.inline-grid > * {display: inline-grid;}
</style>
<div class="container grid grid-auto-flow">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.grid {display: grid;}
.grid-auto-flow {grid-auto-flow: column;}
</style>
<div class="container grid grid-template-columns">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.grid {display: grid;}
.grid-template-columns {grid-template-columns: repeat(3, 1fr);}
</style>
<div class="container grid grid-template-areas">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.grid {display: grid;}
.grid-template-areas {grid-template-areas: "a b c";}
</style>
<div class="container writing-mode">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.writing-mode {writing-mode: vertical-lr;}
</style>
<div class="container block">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.container{outline: 0.2vw dashed;}
.block > *{display: block;}
</style>